<template>
  <view class="box">
    <view class="box1">
      <uv-tabs :list="list" @click="click" activeStyle="color: #1d8b8c;background-color: #fff;padding: 3% 30%;border-radius: 50rpx;" lineColor="#1d8b8c" :scrollable="false" inactiveStyle="color: #fff;">
      </uv-tabs>
    </view>
    <view class="box12" v-if="current == 0">
      <uv-tabs :list="list1" @click="click1" activeStyle="color: #008c8c" lineColor="#008c8c">
      </uv-tabs>
      <view class="box2" v-if="current1 == 0">
        <view class="box21" v-for="(item,index) in shopList" :key="item.id">
          <view class="box21-top">
            <view class="box21-top1">
              <image :src="item.image" mode=""></image>
            </view>
            <view class="box21-top2">
              <view class="">{{item.name}}</view>
              <view style="color: #b3b6c1;font-size: 28rpx;margin: 10rpx 0 20rpx;">{{item.text1}}</view>
              <view style="color: #d44339;">￥{{item.price}}</view>
            </view>
            <view class="box21-top3">
              {{item.text}}
            </view>
          </view>
          <view class="box21-bottom">
            <view class="box21-bottom1">
              运费:￥{{item.price1}}&nbsp;&nbsp;&nbsp;合计:￥{{item.price2}}
            </view>
            <view class="box21-bottom2">
              <uv-button shape="circle" text="订单详情" :plain="true" color="#008c8c" size="small"></uv-button>
            </view>
          </view>
        </view>
      </view>
      <view class="box2" v-if="current1 == 1">
        2
      </view>
      <view class="box2" v-if="current1 == 2">
        3
      </view>
      <view class="box2" v-if="current1 == 3">
        4
      </view>
      <view class="box2" v-if="current1 == 4">
        5
      </view>
      <view class="box2" v-if="current1 == 5">
        6
      </view>
    </view>
    <view class="box12" v-if="current == 1">
      234
    </view>
  </view>
</template>

<script setup>
  import {
    ref
  } from 'vue';
  const list = ref(
    [{
      name: '商城订单',
    }, {
      name: '服务订单',
    }]
  )
  const list1 = ref(
    [{
      name: '全部',
    }, {
      name: '待支付',
    }, {
      name: '待发货',
    }, {
      name: '待自提',
    }, {
      name: '待收货',
    }, {
      name: '已完成',
    }]
  )
  const shopList = ref(
    [
      {id:1,image:"../../static/image/mein.jpg",name:'商品名称商品名称',text:"待支付",text1:"规格一",price:"125",price1:"0.00",price2:"120.00"},
      {id:2,image:"../../static/image/mein.jpg",name:'商品名称商品名称',text:"待发货",text1:"规格一",price:"125",price1:"0.00",price2:"120.00"},
      {id:3,image:"../../static/image/mein.jpg",name:'商品名称商品名称',text:"待自提",text1:"规格一",price:"125",price1:"0.00",price2:"120.00"},
      {id:4,image:"../../static/image/mein.jpg",name:'商品名称商品名称',text:"待收货",text1:"规格一",price:"125",price1:"0.00",price2:"120.00"},
      {id:5,image:"../../static/image/mein.jpg",name:'商品名称商品名称',text:"已完成",text1:"规格一",price:"125",price1:"0.00",price2:"120.00"},
    ]
  )
  const current = ref(0)
  const click = ((item) => {
    // console.log('item', item);
    current.value = item.index
  })
  const current1 = ref(0)
  const click1 = ((item1) => {
    // console.log('item1', item);
    current1.value = item1.index
  })
</script>

<style lang="scss">
  @import url("order.scss")
</style>